<template>
  <view>
    <form>
      <view class="cu-form-group margin-top">
        <view class="title">作品名称：</view>
        <input placeholder="请输入名称" name="input" v-model="form.title"/>
      </view>
      <view class="cu-form-group label">
        <view class="title" v-model="form.cause">描述</view>
      </view>
      <view class="cu-form-group ta">
        <textarea maxlength="-1" class="input" v-model="form.remark" placeholder="请输入内容"></textarea>
      </view>

      <view class="cu-form-group label">
        <view class="title">请上传图片</view>
      </view>
      <view class="cu-form-group" style="border-top: 0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,i) in imageList" :key="i" @tap="handleViewImage(item)">
            <image :src="host+item" mode="aspectFill"></image>
            <view class="cu-tag bg-red" @click.stop="handleDeleteClick(i)">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="ChooseImage" v-if="imageList.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
        </view>
      </view>

    </form>

    <view class="btn" @click="handlePost">提交</view>
  </view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  name: "technician-achievement-post",
  data() {
    return {
      type: null,
      form: {
        title: '',
        image: [],
        remark: "",
      },
      imageList: [],
      host: '',
    }
  },
  methods: {
    handleViewImage(url) {
      let list = this.imageList.map(i => this.host + i);
      uni.previewImage({
        urls: list,
        current: this.host + url
      });
    },
    ChooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0]);
        }
      });
    },
    uploadImage(file) {
      Api.uploadImage(file).then(res => {
        this.imageList.push(...res.map(i => i.src));
        this.host = res[0].host;
      })
    },
    handleDeleteClick(i) {
      this.imageList.splice(i, 1)
    },
    handlePost() {
      if (!this.form.title) {
        this.$toast("请输入标题")
      } else if (this.imageList.length == 0) {
        this.$toast("请上传图片")
      } else if (!this.form.remark) {
        this.$toast("请输入描述")
      } else {
        this.form.image = this.imageList.join(",")
        Api.editTechnicianWork(this.form).then(res => {
          this.core.prePageHandleMethod("refresh")
          uni.navigateBack();
        })
      }
    },
    getDetail(id) {
      Api.getWorksDetail(id).then(res => {
        let {id, title, remark, image} = res;
        this.form.works_id = id
        this.form.title = title
        this.form.remark = remark
        let img = image[0]
        if (img) {
          this.host = img.split("/").slice(0, 3).join("/");

          this.imageList = image.map(i => "/" + i.split("/").slice(3).join("/"))
        }
      })
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    let {id} = options;
    if (id) this.getDetail(id)
  },

}
</script>

<style scoped lang='scss'>
.picker {
  height: r(100px);
}

.label {
  //padding-bottom: r(10px);
  min-height: r(50px);
}

.ta {
  border-top: 0;

  .input {
    margin-top: 0;
  }
}

.btn {
  background-color: $primary-color;
  border-radius: r(10px);
  color: white;
  text-align: center;
  padding: r(20px 0);
  margin: r(24px);
}
</style>